<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores";
import { to } from "@/router";

const userStore = useUserStore();
const userInfo = ref(userStore.userInfo);

const handleExit = () => {
  userStore.logout();
  to("login");
};
</script>

<template>
  <view>
    <view v-if="!userInfo.account">
      <uv-empty
        mode="data"
        icon="https://cdn.uviewui.com/uview/empty/data.png"
      ></uv-empty>
      <view class="pa-5">
        <uv-button
          type="success"
          text="前往登录"
          @click="$to('login')"
        ></uv-button>
      </view>
    </view>

    <view v-else>
      <uv-cell-group>
        <uv-cell title="头像">
          <template #value>
            <uv-avatar :src="userInfo.avatar"></uv-avatar>
          </template>
        </uv-cell>
        <uv-cell
          title="名字"
          :value="userInfo.username"
        ></uv-cell>
        <uv-cell
          title="账号"
          :value="userInfo.account"
        ></uv-cell>
        <uv-cell
          title="手机号"
          :value="userInfo.phone"
        ></uv-cell>
        <uv-cell
          title="性别"
          :value="userInfo.sex"
        ></uv-cell>
      </uv-cell-group>

      <view class="pa-5">
        <uv-button
          type="error"
          text="退出登陆"
          @click="handleExit"
        ></uv-button>
      </view>
    </view>

    <app-bottom-bar :current="2" />
  </view>
</template>

<style lang="scss" scoped></style>
